---
title: Navigation Menu
description: Displays an 8-bit navigation menu component.
---

import CopyCommandButton from "@/components/copy-command-button";
import InstallationCommands from "@/components/installation-commands";
import ComponentPreview from "@/components/component-preview";
import NavigationMenuDemo from "@/components/examples/navigation-menu";

<div className="flex flex-col md:flex-row items-center justify-end gap-2 mb-2">
  <CopyCommandButton
    copyCommand="pnpm dlx shadcn@latest add @8bitcn/navigation-menu"
    command="pnpm dlx shadcn@latest add @8bitcn/navigation-menu"
  />
</div>

<ComponentPreview title="8-bit Navigation Menu component" name="navigation-menu">
  <NavigationMenuDemo />
</ComponentPreview>

## Installation

---

<InstallationCommands packageName="navigation-menu" />

## Usage

---

```tsx
import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuIndicator,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
  NavigationMenuViewport,
} from "@/components/ui/8bit/navigation-menu"
```

```tsx
<NavigationMenu>
  <NavigationMenuList>
    <NavigationMenuItem>
      <NavigationMenuTrigger>Item One</NavigationMenuTrigger>
      <NavigationMenuContent>
        <NavigationMenuLink>Link</NavigationMenuLink>
      </NavigationMenuContent>
    </NavigationMenuItem>
  </NavigationMenuList>
</NavigationMenu>
```

